<template>
  <view class="page">
    <view class="container">
      <!-- 个人信息卡片 -->
      <view class="info-card">
        <uni-text class="name">{{ userInfo.name || '未登录' }}</uni-text>
        <view class="info-grid">
          <view class="info-item">
            <uni-icons :size="20" type="person" color="#4A90E2"/>
            <uni-text class="label">年龄：{{ userInfo.age ? userInfo.age + '岁' : '--' }}</uni-text>
          </view>
          <view class="info-item">
            <uni-icons :size="20" type="heart" color="#4A90E2"/>
            <uni-text class="label">性别：{{ userInfo.gender || '--' }}</uni-text>
          </view>
          <view class="info-item">
            <uni-icons :size="20" type="star" color="#4A90E2"/>
            <uni-text class="label">健康状况：{{ userInfo.health || '--' }}</uni-text>
          </view>
        </view>
        <view class="contact-info">
          <view class="contact-item">
            <uni-icons :size="20" type="phone" color="#4A90E2"/>
            <uni-text class="label">手机：{{ userInfo.phone ? userInfo.phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2') : '--' }}</uni-text>
          </view>
          <view class="contact-item">
            <uni-icons :size="20" type="email" color="#4A90E2"/>
            <uni-text class="label">邮箱：{{ userInfo.email || '--' }}</uni-text>
          </view>
        </view>
      </view>

      <!-- 个人数据看板 -->
      <view class="data-dashboard">
        <view class="dashboard-item">
          <uni-text class="dashboard-value">25</uni-text>
          <uni-text class="dashboard-label">服务志愿次数</uni-text>
        </view>
        <view class="dashboard-item">
          <uni-text class="dashboard-value">120</uni-text>
          <uni-text class="dashboard-label">服务志愿积分</uni-text>
        </view>
        <view class="dashboard-item">
          <uni-text class="dashboard-value">8</uni-text>
          <uni-text class="dashboard-label">我的社区发表</uni-text>
        </view>
      </view>

      <!-- 操作区域 -->
      <scroll-view class="scroll-area" scroll-y>
        <view class="operation-grid">
          <view class="operation-card" v-for="(item, index) in operations" :key="index" @click="handleOperation(item.type)">
            <uni-icons :size="24" :type="item.icon" color="#4A90E2"/>
            <uni-text class="operation-text">{{ item.title }}</uni-text>
            <uni-icons size="16" type="right" color="#999"/>
          </view>
        </view>

        <!-- 简历卡片 -->
        <view class="doc-card" @click="handleDownloadResume" v-if="userInfo.resume">
          <view class="doc-header">
            <uni-icons :size="24" type="folder" color="#4A90E2" v-if="!isWordResume"/>
            <image v-if="isWordResume" src="/static/word-icon.png" style="width:32rpx;height:32rpx;margin-right:16rpx;" />
            <uni-text class="doc-title">我的简历</uni-text>
          </view>
          <view class="doc-content">
            <uni-text class="doc-name">{{ resumeFileName }}</uni-text>
          </view>
        </view>
        <view class="doc-card" v-else>
          <view class="doc-header">
            <uni-icons :size="24" type="file" color="#4A90E2"/>
            <uni-text class="doc-title">我的简历</uni-text>
          </view>
          <view class="doc-content">
            <uni-text class="doc-name">未上传</uni-text>
          </view>
        </view>

        <!-- 荣誉卡片 -->
        <view class="honor-card">
          <view class="honor-header">
            <uni-icons :size="24" type="medal" color="#4A90E2"/>
            <uni-text class="honor-title">我的荣誉</uni-text>
          </view>
          <view class="honor-content">
            <uni-text :class="['honor-text', {'expanded': isExpanded}]">{{ userInfo.honors || '暂无荣誉信息' }}</uni-text>
            <uni-text class="expand-btn" @click="toggleExpand">{{ isExpanded ? '收起' : '展开' }}</uni-text>
          </view>
        </view>
      </scroll-view>

      <!-- 退出登录按钮 -->
      <view class="logout-container">
        <button class="logout-btn" @click="handleLogout">退出登录</button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';

const isExpanded = ref(false);

const operations = [
  { title: '修改密码', icon: 'locked', type: 'password' },
  { title: '我的报名', icon: 'calendar', type: 'signup' },
  { title: '我的发帖', icon: 'chat', type: 'posts' }
];

const userInfo = ref<any>({});

// 简历文件名和类型判断
const resumeFileName = computed(() => {
  if (!userInfo.value.resume) return '';
  const url = userInfo.value.resume;
  return url.split('/').pop();
});
const isWordResume = computed(() => {
  if (!userInfo.value.resume) return false;
  return /\.docx?$/.test(userInfo.value.resume);
});

const toggleExpand = () => {
  isExpanded.value = !isExpanded.value;
};

const handleOperation = (type: string) => {
  if (type === 'signup') {
    uni.navigateTo({
      url: '/pages/myactivety/myactivety'
    });
  } else if (type === 'posts') {
    uni.navigateTo({
      url: '/pages/myCommunityPublish/myCommunityPublish'
    });
  } else if (type === 'password') {
    uni.navigateTo({
      url: '/pages/updatePassword/updatePassword'
    });
  } else {
    uni.showToast({
      title: `点击了${type}`,
      icon: 'none'
    });
  }
};

const handleLogout = () => {
  uni.showModal({
    title: '提示',
    content: '确定要退出登录吗？',
    success: (res) => {
      if (res.confirm) {
        uni.clearStorageSync();
        uni.reLaunch({ url: '/pages/login/login' });
      }
    }
  });
};

// 简历下载
function handleDownloadResume() {
  if (!userInfo.value.resume) return;
  uni.showLoading({ title: '下载中...' });
  uni.downloadFile({
    url: userInfo.value.resume,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveFile({
          tempFilePath: res.tempFilePath,
          success: (saveRes) => {
            uni.showToast({ title: '下载成功', icon: 'success' });
            uni.openDocument({
              filePath: saveRes.savedFilePath,
              fileType: 'docx',
              showMenu: true,
              success: () => {
                uni.hideLoading();
              },
              fail: () => {
                uni.hideLoading();
                uni.showToast({ title: '打开失败', icon: 'none' });
              }
            });
          },
          fail: () => {
            uni.hideLoading();
            uni.showToast({ title: '保存失败', icon: 'none' });
          }
        });
      } else {
        uni.hideLoading();
        uni.showToast({ title: '下载失败', icon: 'none' });
      }
    },
    fail: () => {
      uni.hideLoading();
      uni.showToast({ title: '下载失败', icon: 'none' });
    },
    complete: () => {
      setTimeout(() => { uni.hideLoading(); }, 300);
    }
  });
}

onMounted(() => {
  // 兼容后端返回格式，优先取data字段
  const local = uni.getStorageSync('userInfo');
  if (local) {
    try {
      const obj = typeof local === 'string' ? JSON.parse(local) : local;
      userInfo.value = obj.data || obj;
    } catch (e) {
      userInfo.value = {};
    }
  }
});
</script>

<style>
page {
  height: 100%;
  background-color: #f5f7fa;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30rpx;
}

.info-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  display: block;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.info-item, .contact-item {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.scroll-area {
  flex: 1;
  overflow: auto;
}

.operation-grid {
  display: grid;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.operation-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  gap: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.operation-text {
  flex: 1;
  font-size: 32rpx;
  color: #333;
}

.doc-card, .honor-card {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.doc-header, .honor-header {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-bottom: 20rpx;
}

.doc-title, .honor-title {
  font-size: 32rpx;
  color: #333;
  font-weight: bold;
}

.doc-name {
  font-size: 28rpx;
  color: #666;
}

.honor-text {
  font-size: 28rpx;
  color: #666;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.honor-text.expanded {
  -webkit-line-clamp: unset;
}

.expand-btn {
  color: #4A90E2;
  font-size: 28rpx;
  margin-top: 16rpx;
  display: block;
}

.logout-container {
  margin-top: 30rpx;
  padding-bottom: 30rpx;
}

.logout-btn {
  background-color: #FF6B6B;
  color: #fff;
  font-size: 32rpx;
  border-radius: 16rpx;
  width: 100%;
}

.data-dashboard {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}
.dashboard-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.dashboard-value {
  font-size: 48rpx;
  font-weight: bold;
  color: #4A90E2;
  margin-bottom: 8rpx;
}
.dashboard-label {
  font-size: 24rpx;
  color: #666;
}
</style>

